<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
            padding-left: 20px;
        }

        .title {
            line-height: 50px;
        }

        .list li {
            line-height: 45px;
            border: 1px dashed #333;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <h3 class="title">多元素获取和设置</h3>
        <input type="text" class="inp">
        <ul class="list">
            <li value="1">01
                <div></div>
            </li>
            <li value="1">02</li>
            <li value="1">03</li>
            <li value="1">04</li>
            <li value="1">05</li>
        </ul>
    </div>
    <div class="box">
        <button class="setHtml">
            设置html
        </button>
        <button class="getHtml">
            获取html
        </button>
        <button class="hide">隐藏</button>
        <button class="show">显示</button>
        <button class="setWidth">
            设置宽度
        </button>
        <button class="getWidth">
            获取宽度
        </button>
        <button class="attr">attr</button>
        <button class="prop">prop</button>
        <button class="css">css</button>
        <button class="addClass">addClass</button>
        <button class="removeClass">removeClass</button>
        <button class="eq">eq</button>
        <button class="siblings">siblings</button>
        <button class="chain">链式操作</button>
    </div>
</body>
<script>
    // 原型对象
    function GetEle(selector) {
        this.eles = document.querySelectorAll(selector)
    }
    GetEle.prototype.html = function (con) {
        if (arguments.length >= 1) { // 如果有参数
            // for (var i = 0; i < this.eles.length; i++) {
            //     this.eles[i].innerHTML = con;
            // }
            this.each(function (eles) {
                eles.innerHTML = con;
            });
        } else {
            return this.eles[0].innerHTML;
        }
    }
    GetEle.prototype.text = function (con) {
        if (arguments.length >= 1) { // 如果有参数
            // for (var i = 0; i < this.eles.length; i++) {
            //     this.eles[i].textContent = con;
            // }
            this.each(function (eles) {
                eles.textContent = con;
            });
        } else {
            return this.eles[0].textContent;
        }
    }
    GetEle.prototype.val = function (con) {
        if (arguments.length >= 1) { // 如果有参数
            // for (var i = 0; i < this.eles.length; i++) {
            //     this.eles[i].value = con;
            // }
            this.each(function (eles) {
                eles.value = con;
            });
        } else {
            return this.eles[0].value;
        }
    }
    GetEle.prototype.hide = function () {
        this.each(function (eles) {
            eles.style.display = "none";
        });
    }
    GetEle.prototype.show = function () {
        this.each(function (eles) {
            eles.style.display = "block";
        });
    }

    // 遍历实例化对象中的集合  每次循环时执行传入的回调函数 (item,index)
    GetEle.prototype.each = function (fn) {
        for (var i = 0; i < this.eles.length; i++) {
            var item = this.eles[i];
            var index = i;
            fn(item, i);
            // 注意 jquery中 第一个参数是下标,第二个才会循环的当前元素
            // fn(index, item);
        }
    }
    GetEle.prototype.click = function (fn) {
        this.each(function (eles) {
            eles.onclick = fn;
        });
    }
    GetEle.prototype.getStyle = function (attr) {
        var ele = this.eles[0];
        if (window.getComputedStyle) {
            return window.getComputedStyle(ele)[attr];
        } else {
            return ele.currentStyle[attr];
        }
    }
    GetEle.prototype.width = function (con) {
        if (arguments.length >= 1) {
            this.each(function (eles) {
                // 是否有单位?
                //   有单位   px pt  %  em rem vw  vh   => 直接拼接
                // 没有单位   200                       => 默认"px"
                var unit = /^\d+(\.\d+)?(px|pt|%|em|rem|vw|vh)$/;
                if (unit.test(con)) {
                    eles.style.width = con;
                } else {
                    eles.style.width = con + "px";
                }
            });
        } else {
            return parseInt(this.getStyle("width"));
        }
    }
    GetEle.prototype.height = function (con) {
        if (arguments.length >= 1) {
            this.each(function (eles) {
                // 是否有单位?
                //   有单位   px pt  %  em rem vw  vh   => 直接拼接
                // 没有单位   200                       => 默认"px"
                var unit = /^\d+(\.\d+)?(px|pt|%|em|rem|vw|vh)$/;
                if (unit.test(con)) {
                    eles.style.height = con;
                } else {
                    eles.style.height = con + "px";
                }
            });
        } else {
            return parseInt(this.getStyle("height"));
        }
    }



    // 对GetEle进行二次封装  => 快速创建实例化对象并返回
    function $(selector) {
        return new GetEle(selector)
    }

    $(".title").text("hahahaha");
    $(".inp").val("2121");

    $(".hide").click(function() {
        $(".list li").hide();
    });
    $(".show").click(function() {
        $(".list li").show();
    });
    $(".setWidth").click(function() {
        // console.log(11);
        $(".list li").width("200");
    });
    $(".getWidth").click(function() {
        // console.log(11);
        console.log($(".list li").width());
    });
    $(".setWidth").click(function() {
        // console.log(11);
        $(".list li").height("200");
    });
    $(".getWidth").click(function() {
        // console.log(11);
        console.log($(".list li").height());
    });


</script>

</html>